<template>
  <div class="approvaing">
    <header>
      <el-form :inline="true" :model="form">
        <el-form-item label="状态">
          <el-select v-model="form.auditStauts" placeholder="请选择" clearable @change="getList" style="width: 240px">
            <el-option label="待审核" value="1" />
            <el-option label="已审核" value="2" />
            <el-option label="已撤销" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否采纳">
          <el-select v-model="form.adoptStatus" placeholder="请选择" clearable @change="getList" style="width: 240px">
            <el-option label="未采纳" value="0" />
            <el-option label="已采纳" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <el-input v-model="form.searchkey" style="width: 300px" placeholder="请输入一级分类、电话号码" clearable @change="getList">
        <template #prefix>
          <el-icon class="el-input__icon"><search /></el-icon>
        </template>
      </el-input>
    </header>
    <div class="list-wrap">
      <header>
        <el-row style="width: 100%">
          <el-col :span="4">提交者账户信息</el-col>
          <el-col :span="6">备注信息</el-col>
          <el-col :span="3" style="text-align: center">一级分类</el-col>
          <!-- <el-col :span="2" style="text-align: center">二级分类</el-col>
          <el-col :span="2" style="text-align: center">三级分类</el-col> -->
          <el-col :span="3" style="text-align: center">状态</el-col>
          <el-col :span="8" style="text-align: center">操作</el-col>
        </el-row>
      </header>
      <!-- 数据列表 -->
      <div class="data-list">
        <div class="data-list-item" v-for="(item, index) in list" :key="index">
          <p>
            <span>提交编码：{{ item.orderNo }}</span>
            <span>{{ item.createTime }}</span>
          </p>
          <el-row style="width: 100%">
            <el-col :span="4">
              <div class="info">
                <img v-if="item.avatar" :src="item.avatar" alt="" />
                <img v-else src="@/assets/images/products/default-photo.png" alt="" />
                <div>
                  <span>账户电话</span>
                  <p>{{ item.mobile }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <p class="tips text-over" :title="item.remark">
                {{ item.remark }}
              </p>
            </el-col>
            <el-col :span="3" class="text-center">
              <b class="text-over" :title="item.categoryName">{{ item.categoryName }}</b>
            </el-col>
            <!-- <el-col :span="2" class="text-center">
              <span>-待审核后添加-</span>
            </el-col>
            <el-col :span="2" class="text-center">
              <span>-待审核后添加-</span>
            </el-col> -->
            <el-col :span="3" class="text-center">
              <div>
                <el-tag v-if="item.auditStauts === 1" type="warning">待审批</el-tag>
                <el-tag v-else-if="item.auditStauts === 2">已审核</el-tag>
                <el-tag v-else type="info">已撤销</el-tag>
              </div>
            </el-col>
            <el-col :span="8" class="text-center">
              <div class="btn-wrap" v-if="item.auditStauts === 1 || item.adoptStatus === null">
                <!-- 待审核 -->
                <p><el-button type="primary" @click="openDialog(1, item)" style="width: 100px">采纳此分类</el-button></p>
                <p><el-button type="primary" style="width: 100px" @click="openDialog(2, item)">已有类似</el-button></p>
              </div>
              <div class="btn-wrap" v-else-if="item.auditStauts === 2">
                <!-- 已审核 -->
                <el-tag v-if="item.adoptStatus === 0" style="margin-left: 10px">已有类似</el-tag>
                <el-tag v-else type="success">已采纳</el-tag>
              </div>
              <div v-else>-</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 采纳、标记确认框 -->
  <el-dialog
    v-model="dialogVisible"
    :title="dialogType === 1 ? `${currentItem.categoryName}_采纳确认弹窗` : '标记为已有类似'"
    width="700"
    modal-class="del-dialog appprovaing-dialog"
  >
    <div class="title">
      <span>分类名称</span>
      <p>{{ currentItem.categoryName }}</p>
    </div>
    <div class="info">
      <div>
        <img v-if="currentItem.avatar" :src="currentItem.avatar" alt="" />
        <img v-else src="@/assets/images/products/default-photo.png" alt="" />
        <div class="info-detail">
          <p><span>账户电话：</span>{{ currentItem.mobile }}</p>
          <p><span>提交编码：</span>{{ currentItem.orderNo }}</p>
          <p><span>提交时间：</span>{{ currentItem.createTime }}</p>
        </div>
      </div>
    </div>
    <p style="margin-top: 20px; color: #ff3333; font-size: 12px">
      温馨提示：您将采纳当前商品分类名称，确认后请完善子级分类 以及其它属性规格的添加，为使用者提供更好的体验
    </p>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button v-show="dialogType === 1" type="primary" @click="submitAdopt('1')">确认并采纳</el-button>
        <el-button v-show="dialogType === 2" type="primary" @click="submitAdopt('0')">已有类似</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { pageAuditList, adopt } from "@/api/products/classify";
import { ElMessage } from "element-plus";

const form = ref({});
const list = ref([{ name: "AAA" }, { name: "BBB" }, { name: "CCC" }, { name: "DDD" }, { name: "EEE" }]); //list数据列表
const pagination = reactive({
  page: 1,
  pageSize: 5,
  pageSizes: [5, 10, 20, 30, 40, 50],
  total: 0
});
const dialogVisible = ref(false); //采纳此分类/已有类似 确认弹窗类型
const dialogType = ref(1); //确认弹窗类型  1-采纳此分类  2-已有类似
const currentItem = ref({}); //点击的当前item
const approvaingNum = ref(0);
const emit = defineEmits(["adopt"]);

onMounted(async () => {
  getList();
  await getListApprovaing();
  emit("adopt", approvaingNum.value);
});

const getList = () => {
  pageAuditList({
    page: pagination.page,
    size: pagination.pageSize,
    search: form.value?.searchkey,
    auditStauts: form.value?.auditStauts,
    adoptStatus: form.value?.adoptStatus
  }).then(res => {
    if (res.code === 200) {
      console.log("待审核分类list===", res.data.records);
      list.value = res.data.records;
      pagination.total = res.data.total;
    }
  });
};
const getListApprovaing = async () => {
  await pageAuditList({
    page: 1,
    size: 10,
    auditStauts: "1" //待审核
  }).then(res => {
    if (res.code === 200) {
      approvaingNum.value = res.data.total;
      // console.log("待审核数据===", res.data.total);
    }
  });
};

const openDialog = (type, item) => {
  dialogType.value = type;
  currentItem.value = item;
  dialogVisible.value = true;
};
const handleSizeChange = val => {
  pagination.pageSize = val;
  getList();
};
const handleCurrentChange = val => {
  pagination.page = val;
  getList();
};
const submitAdopt = flag => {
  adopt({ categoryAuditId: currentItem.value.categoryAuditId, adoptStatus: flag }).then(async res => {
    if (res.code === 200) {
      ElMessage({
        message: "操作成功",
        type: "success"
      });
      dialogVisible.value = false;
      getList();
      await getListApprovaing();
      emit("adopt", approvaingNum.value);
    }
  });
};
</script>

<style lang="scss">
.appprovaing-dialog {
  .el-dialog__body {
    .title {
      width: 240px;
      padding: 16px 0;
      height: auto;
      p {
        line-height: 24px;
        margin-top: 10px;
      }
    }
    .info {
      display: flex;
      justify-content: center;
      background-color: #f5f7fa;
      & > div {
        display: flex;
        padding: 20px 0;
        img {
          margin-right: 27px;
          border-radius: 50%;
          width: 80px;
          height: 80px;
        }
        .info-detail {
          text-align: left;
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
p {
  margin: 0;
}
.approvaing {
  & > header {
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .list-wrap {
    header {
      margin-top: 30px;
      background-color: #f2f6fc;
      height: 50px;
      line-height: 50px;
      padding: 0 0 0 18px;
      font-size: 14px;
      color: #4e5969;
    }
    .data-list {
      font-size: 12px;
      .data-list-item {
        border: 1px solid #e1e6ed;
        margin-top: 10px;
        & > p {
          padding: 0 18px;
          background-color: #e1e6ed;
          display: flex;
          line-height: 40px;
          height: 40px;
          color: #86909c;
          display: flex;
          justify-content: space-between;
        }
        .el-row {
          padding: 0 0 0 18px;
          .el-col {
            padding: 16px 0;
            color: #86909c;
            display: flex;
            align-items: center;
            &.text-center {
              justify-content: center;
            }
            &:not(:last-of-type) {
              border-right: 1px solid #e1e6ed;
            }
          }
          b {
            color: #3d3d3d;
          }
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .tips {
            padding: 0 10px;
          }
          .info {
            display: flex;
            align-items: center;
            font-size: 14px;
            width: 100%;
            & > div {
              flex-grow: 1;
              display: block;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            span {
              color: #86909c;
            }
            p {
              color: black;
              line-height: 24px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .btn-wrap {
    width: 85%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>
